import { useState,useEffect } from "react";
import { EditableProTable } from "@ant-design/pro-components";
import { InputNumber, Button } from "antd";

export default ({ value = [], onChange }) => {
  const [editableKeys, setEditableRowKeys] = useState([]);
  const [dataSource, setDataSource] = useState(value);

  useEffect(() => {
    if (value && value.length) {
      setDataSource(value);
      const ids = value.map((item, index) => item.id || index);
      setEditableRowKeys(ids);
    }
  }, [value]);

  const columns = [
    {
      title: "样品名称",
      dataIndex: "name",
      formItemProps: (form, { rowIndex }) => {
        return {
          rules: [{ required: true, message: "此项为必填项" }],
        };
      },
      width: "20%",
    },
    {
      title: "样品厚度 mm",
      dataIndex: "thickness",
      renderFormItem: () => {
        return <InputNumber placeholder="请输入" precision={3} />;
      },
      formItemProps: (form, { rowIndex }) => {
        return {
          rules: [{ required: true, message: "此项为必填项" }],
        };
      },
      width: "10%",
    },
    {
      title: "压缩应变40%载荷N",
      dataIndex: "strain40SourceLoad",
      renderFormItem: () => {
        return <InputNumber placeholder="请输入" precision={3} />;
      },
      formItemProps: (form, { rowIndex }) => {
        return {
          rules: [{ required: true, message: "此项为必填项" }],
        };
      },
      width: "10%",
    },
    {
      title: "10min载荷N",
      dataIndex: "sourceLoad10",
      renderFormItem: () => {
        return <InputNumber placeholder="请输入" precision={3} />;
      },
      formItemProps: (form, { rowIndex }) => {
        return {
          rules: [{ required: true, message: "此项为必填项" }],
        };
      },
      width: "10%",
    },
    {
      title: "191min载荷N",
      dataIndex: "sourceLoad191",
      renderFormItem: () => {
        return <InputNumber placeholder="请输入" precision={3} />;
      },
      formItemProps: (form, { rowIndex }) => {
        return {
          rules: [{ required: true, message: "此项为必填项" }],
        };
      },
      width: "10%",
    },
    {
      title: "10min松弛率",
      dataIndex: "t10RelaxationRate",
      renderFormItem: () => {
        return <InputNumber placeholder="请输入" precision={3} />;
      },
      formItemProps: (form, { rowIndex }) => {
        return {
          rules: [{ required: true, message: "此项为必填项" }],
        };
      },
      width: "10%",
    },

    {
      title: "t0松弛率",
      dataIndex: "t0RelaxationRate",
      renderFormItem: () => {
        return <InputNumber placeholder="请输入" precision={3} />;
      },
      formItemProps: (form, { rowIndex }) => {
        return {
          rules: [{ required: true, message: "此项为必填项" }],
        };
      },
      width: "10%",
    },


    {
      title: "重量g",
      dataIndex: "weight",
      renderFormItem: () => {
        return <InputNumber placeholder="请输入" precision={3} />;
      },
      formItemProps: (form, { rowIndex }) => {
        return {
          rules: [{ required: true, message: "此项为必填项" }],
        };
      },
      width: "10%",
    },
    {
      title: "密度g/cm3",
      dataIndex: "density",
      renderFormItem: () => {
        return <InputNumber placeholder="请输入" precision={3} />;
      },
      formItemProps: (form, { rowIndex }) => {
        return {
          rules: [{ required: true, message: "此项为必填项" }],
        };
      },
      width: "10%",
    },
    {
      title: "平均孔径 μm",
      dataIndex: "averageAperture",
      width: "10%",
      readonly: true,
    },
    {
      title: "平均圆度",
      dataIndex: "averageRoundness",
      width: "10%",
      readonly: true,
    },
    {
      title: "平均面积",
      dataIndex: "averageArea",
      width: "10%",
      readonly: true,
    },
    {
      title: "等面积圆直径 μm",
      dataIndex: "areaDiameter",
      width: "10%",
      renderFormItem: () => {
        return <InputNumber placeholder="请输入" precision={3} />;
      },
      formItemProps: (form, { rowIndex }) => {
        return {
          rules: [{ required: true, message: "此项为必填项" }],
        };
      },
    },
    {
      title: "泡体直径",
      dataIndex: "bubbleDiameter",
      width: "10%",
      renderFormItem: () => {
        return <InputNumber placeholder="请输入" precision={3} />;
      },
      formItemProps: (form, { rowIndex }) => {
        return {
          rules: [{ required: true, message: "此项为必填项" }],
        };
      },
    },

    {
      title: "操作",
      valueType: "option",
      width: 200,
      render: (text, record, _, action) => [
        // <a
        //   key="editable"
        //   onClick={() => {
        //     action?.startEditable?.(record.id);
        //   }}
        // >
        //   编辑
        // </a>,
        // <a
        //   key="delete"
        //   onClick={() => {
        //     setDataSource(value.filter((item) => item.id !== record.id));
        //   }}
        // >
        //   删除
        // </a>,
      ],
    },
  ];

  return (
    <EditableProTable
      name="poreStructureScDtoList"
      rowKey="id"
      recordCreatorProps={{
        position: "bottom",
        record: (index) => ({ id: index + 1 }),
        creatorButtonText: "新增一行",
      }}
      loading={false}
      columns={columns}
      value={dataSource}
      onChange={onChange}
      editable={{
        type: "multiple",
        editableKeys,
        onValuesChange: (record, recordList) => {
          onChange(recordList);
        },
        onChange: setEditableRowKeys,
        actionRender: (row, config, defaultDom) => [
          // <Button>上传文件</Button>,
          defaultDom.delete,
        ],
      }}
    />
  );
};
